import React from 'react';
import PropTypes from 'prop-types';
import StyleNavBar, { StyledMenuItem, MenuIcon } from './style';
import Badge from 'components/Badge';

const NavBar = ({
    children,
    ...rest
}) => {

    return (
        <StyleNavBar {...rest}>
            {children}
        </StyleNavBar>
    )
}

const MenuItem = ({ icon, active, showBadge, ...rest }) => {
    return (
        <StyledMenuItem active={active} {...rest}>
            <a href="#/">
                <Badge show={showBadge}>
                    <MenuIcon active={active} icon={icon} />
                </Badge>
            </a>
        </StyledMenuItem>
    );
}

NavBar.propTypes = {
    children: PropTypes.any,
}

export default NavBar;

export { MenuItem };